<template>
  <transition
    enter-active-class="animate__animated     animate__fadeIn"
    leave-active-class="animate__animated   animate__fadeOut"
    mode="out-in"
  >
    <div v-show="sliderDialog" class="sliderDialog">
      <transition
        enter-active-class="animate__animated animate_time animate__fadeInUpBig"
        leave-active-class="animate__animated animate_time  animate__fadeOutDownBig"
        mode="out-in"
      >
        <div
          v-show="sliderDialog"
          v-loading="loading"
          class="slider"
          element-loading-background="rgba(255, 255, 255, 0.8)"
          element-loading-text="加载中..."
          @click.stop
        >
          <div class="content">
            <div class="bg-img-div">
              <n-image
                class="bg-img"
                width="260"
                height="160"
                :src="data.backgroundImage"
                :fallback-src="commonImgLoader"
              />
              <!--              <el-image id="bg-img" alt :src="data.backgroundImage">-->
              <!--                <div class="image-slot">-->
              <!--                  <el-icon>-->
              <!--                    <icon-p  icture />-->
              <!--                  </el-icon>-->
              <!--                </div>-->
              <!--              </el-image>-->
            </div>
            <div
              ref="sliderImgDiv"
              class="slider-img-div"
              :style="{ transform: `translate(${translateMoveX}px, 0px)` }"
            >
              <img id="slider-img" alt :src="data.sliderImage" />
            </div>
          </div>
          <div class="slider-move">
            <div class="slider-move-track">拖动滑块完成拼图</div>
            <div
              class="slider-move-btn"
              :style="{
                'background-position': backgroundPosition,
                transform: `translate(${
                  translateMoveX ? translateMoveX : 0
                }px, 0px)`
              }"
              @mousedown="mousedownHandle"
              @touchstart="touchstartHandle"
            ></div>
          </div>
          <div class="bottom">
            <div class="close-btn" @click="sliderDialog = false"></div>
            <div class="refresh-btn" @click="resetSlide"></div>
          </div>
        </div>
      </transition>
    </div>
  </transition>
</template>

<script setup>
  const props = defineProps({
    modelValue: Boolean,
    data: {
      type: Object,
      default: () => ({
        backgroundImage: '',
        sliderImage: ''
      })
    },
    valid: {
      type: Function,
      required: true
    },
    changeCode: {
      type: Function,
      required: true
    }
  })
  const emit = defineEmits(['update:modelValue'])
  const sliderDialog = computed({
    get: () => props.modelValue,
    set(val) {
      emit('update:modelValue', val)
    }
  })
  const loading = ref(false)
  const sliderImgDiv = ref(null)
  const startSlidingTime = ref('')
  const entSlidingTime = ref('')
  const startX = ref('')
  const startY = ref('')
  const backgroundPosition = ref('')
  const translateMoveX = ref(0)
  const trackArr = ref([])
  const end = 206
  const bgImgWidth = 260
  // eslint-disable-next-line no-unused-vars
  let movePercent = 0
  watch(sliderDialog, async (value) => {
    resetHandle()
    if (value) {
      loading.value = true
      await props.changeCode()
      loading.value = false
    }
  })
  const resetSlide = async () => {
    resetHandle()
    loading.value = true
    await props.changeCode()
    loading.value = false
  }
  const resetHandle = () => {
    backgroundPosition.value = '-5px 11.79625%'
    translateMoveX.value = 0
    startX.value = 0
    startY.value = 0
    startSlidingTime.value = 0
    entSlidingTime.value = 0
    trackArr.value = []
    movePercent = 0
  }
  const mousedownHandle = (event) => {
    startSlidingTime.value = new Date()
    startX.value = event.pageX
    startY.value = event.pageY
    backgroundPosition.value = '-5px 31.0092%'
    window.addEventListener('mousemove', move)
    window.addEventListener('mouseup', up)
  }
  const touchstartHandle = (event) => {
    startSlidingTime.value = new Date()
    startX.value = event.pageX
    startY.value = event.pageY
    console.log(event)
    if (startX.value === undefined) {
      startX.value = event.touches[0].pageX
      startY.value = event.touches[0].pageY
    }
    backgroundPosition.value = '-5px 31.0092%'
    window.addEventListener('touchmove', move)
    window.addEventListener('touchend', up)
  }
  const move = (event) => {
    // if (event instanceof TouchEvent) {
    //   event = event.touches[0]
    // }
    let moveX = event.pageX - startX.value
    const pageX = event.pageX
    const pageY = event.pageY
    // console.log(
    //   'x:',
    //   pageX,
    //   'y:',
    //   pageY,
    //   'time:',
    //   new Date().getTime() - startSlidingTime.value.getTime()
    // )
    trackArr.value.push({
      x: pageX - startX.value,
      y: pageY - startY.value,
      t: new Date().getTime() - startSlidingTime.value.getTime()
    })
    if (moveX < 0) {
      moveX = 0
    } else if (moveX > end) {
      moveX = end
    }
    translateMoveX.value = moveX
    movePercent = moveX / bgImgWidth
  }
  const up = async () => {
    entSlidingTime.value = new Date()
    window.removeEventListener('mousemove', move)
    window.removeEventListener('mouseup', up)
    const data = {
      bgImageWidth: bgImgWidth,
      bgImageHeight: 160,
      sliderImageWidth: sliderImgDiv.value.offsetWidth,
      sliderImageHeight: sliderImgDiv.value.offsetHeight,
      startSlidingTime: startSlidingTime.value,
      entSlidingTime: entSlidingTime.value,
      trackList: trackArr.value
    }
    loading.value = true
    try {
      await props.valid(data)
    } finally {
      resetHandle()
      loading.value = false
    }
  }
  onBeforeUnmount(() => {
    window.removeEventListener('mousemove', move)
    window.removeEventListener('mouseup', up)
    window.removeEventListener('touchmove', move)
    window.removeEventListener('touchend', up)
  })
</script>

<style lang="less" scoped>
  .animate_time {
    animation-duration: 0.6s;
  }

  .sliderDialog {
    background-color: rgba(0, 0, 0, 0.5);
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .slider {
    background-color: #fff;
    width: 278px;
    height: 285px;
    z-index: 999;
    box-sizing: border-box;
    padding: 9px;
    border-radius: 6px;
    box-shadow: 0 0 11px 0 #999999;
    user-select: none;

    .content {
      width: 100%;
      height: 159px;
      position: relative;
    }

    .bg-img-div {
      width: 100%;
      height: 100%;
      position: absolute;
      transform: translate(0px, 0px);
    }

    .slider-img-div {
      height: 100%;
      position: absolute;
      transform: translate(0px, 0px);
    }

    .bg-img img {
      width: 260px;
      height: 160px;
    }

    .slider-img-div img {
      height: 100%;
    }

    .slider-move {
      height: 60px;
      width: 100%;
      margin: 11px 0;
      position: relative;
    }

    .bottom {
      height: 19px;
      width: 100%;
    }

    .refresh-btn,
    .close-btn,
    .slider-move-track,
    .slider-move-btn {
      background: url('../../../assets/images/login/sprite.png') no-repeat;
    }

    .refresh-btn,
    .close-btn {
      display: inline-block;
      margin-right: 20px;
    }

    .slider-move .slider-move-track {
      line-height: 38px;
      font-size: 14px;
      text-align: center;
      white-space: nowrap;
      color: #88949d;
      -moz-user-select: none;
      -webkit-user-select: none;
      user-select: none;
    }

    .slider-move .slider-move-btn {
      transform: translate(0px, 0px);
      background-position: -5px 11.79625%;
      position: absolute;
      top: -12px;
      left: 0;
      width: 66px;
      height: 66px;
    }

    .slider-move-btn:hover,
    .close-btn:hover,
    .refresh-btn:hover {
      cursor: pointer;
    }

    .bottom .close-btn {
      width: 20px;
      height: 20px;
      background-position: 0 44.86874%;
    }

    .bottom .refresh-btn {
      width: 20px;
      height: 20px;
      background-position: 0 81.38425%;
    }

    .after {
      color: #88949d;
    }
  }
</style>
